<template>
  <div id="app">
    <h2></h2>
    <!-- 三.引用组件 -->
    <!-- 
    <MainHeader></MainHeader>
    <MainTodo></MainTodo>
    <MainFooter></MainFooter> 
    -->

    <!-- 更推荐的写法 -->
    <main-header></main-header>
    <main-todo></main-todo>
    <main-footer></main-footer>
  </div>
</template>

<script>
// 导入组件对象
// 为了保证风格的统一，统一不写后缀，打包工具会自动识别.js .mjs .vue文件
import MainHeader from './components/MainHeader';

import MainTodo from './components/MainTodo';

import MainFooter from './components/MainFooter';

// 导出的对象
export default {
  name: 'App',
  components: {
    // 二.挂载到App组件上
    MainHeader,
    MainTodo,
    MainFooter,
  },
};
</script>

<style lang="stylus">
// 导入reset重置样式
// 此处的相对路径，是相对于当前的App.vue文件
// @import './assets/styles/reset.styl'
@import '~styles/reset.styl';
</style>
